<template>
    <div id="questionnaire">
        <div class="tutoring">
            <img src="./image/zuogediaocha.png" alt="">
            <div class="title">调查问卷</div>
        </div>
        <div class="matter">
            <!-- 面包屑 -->
            <div class="breadcrumb">
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>辅导培训</el-breadcrumb-item>
                    <el-breadcrumb-item>调查问卷</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <!-- logo -->
            <div class="logo">
                <img src="./image/diaochawenjuanLogo.png" alt="">
                <div>调查问卷</div>
            </div>
            <!-- 内容列表 -->
            <div class="substance">
                <div class="list" @click="goQuestionnaireDetails(0)">
                    <div class="left">
                        <i class="el-icon-edit-outline"></i>
                        <span :class="active==0?'active':''">顺义文化馆服务情况满意度调查问卷</span>
                    </div>
                    <div class="right"><i class="el-icon-arrow-right"></i></div>
                </div>
                <div class="list" @click="goQuestionnaireDetails(1)">
                    <div class="left">
                        <i class="el-icon-edit-outline"></i>
                        <span :class="active==1?'active':''">顺义文化馆辅导培训满意度调查问卷</span>
                    </div>
                    <div class="right"><i class="el-icon-arrow-right"></i></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
	data() {
		return {
            active: 0, // 切换内容列表样式
        };
	},
    mounted(){
    },
	methods: {
        // 切换内容列表样式、跳转到调查问卷详情
        goQuestionnaireDetails(index) {
            this.active = index
            this.$router.push("/dcwj/questionnaireDetails")
        },
    },
}
</script>

<style scoped lang="less">
@media screen and (min-width: 1400px){    
    #questionnaire{
        min-width: 1200px;
        max-width: 1400px;
        margin: 0 auto;
        box-sizing: border-box;
        // 培训辅导
        .tutoring{
            width: 100%;
            height: 200px;
            position: relative;
            img{
                width: 100%;
                height: 100%;
            }
            .title{
                font-size: 20px;
                font-family: PingFang SC;
                font-weight: 500;
                position: absolute;
                left: 10%;
                bottom: 15%;
            }
        }
        // 内容
        .matter{
            width: 84%;
            padding: 0% 8%;
            // 面包屑
            .breadcrumb{
                margin-top: 2%;
            }
            // logo
            .logo{
                width: 100%;
                height: 95px;
                text-align: center;
                position: relative;
                img{
                    width: 30%;
                    height: 100%;
                }
                div{
                    font-size: 20px;
                    position: absolute;
                    left: 47%;
                    bottom: 25%;
                }
            }
            // 内容列表
            .substance{
                border-top: 1px solid #ccc;
                margin-bottom: 10%;
                .list:hover{
                    box-shadow: 0px 9px 30px 0px rgba(64, 45, 20, 0.1);
                }
                .list{
                    padding: 1% 5%;
                    font-size: 16px;
                    border-bottom: 1px solid #ccc;
                    display: flex;
                    i{
                        margin-right: 1%;
                        font-size: 16px;
                    }
                    .left{
                        flex: 6;
                        i{
                            color: #F19417;
                        }
                        .active{
                            color: #F19417;
                        }
                    }
                    .right{
                        flex: 1;
                        text-align: right;
                    }
                }
            }
        }
    }
}



@media screen and (max-width: 1400px){    
    #questionnaire{
        min-width: 1200px;
        max-width: 1400px;
        margin: 0 auto;
        box-sizing: border-box;
        // 培训辅导
        .tutoring{
            width: 100%;
            height: 200px;
            position: relative;
            img{
                width: 100%;
                height: 100%;
            }
            .title{
                font-size: 18px;
                font-family: PingFang SC;
                font-weight: 500;
                position: absolute;
                left: 10%;
                bottom: 15%;
            }
        }
        // 内容
        .matter{
            width: 84%;
            padding: 0% 8%;
            // 面包屑
            .breadcrumb{
                margin-top: 1.5%;
            }
            // logo
            .logo{
                width: 100%;
                height: 90px;
                text-align: center;
                position: relative;
                img{
                    width: 30%;
                    height: 100%;
                }
                div{
                    font-size: 18px;
                    position: absolute;
                    left: 47%;
                    bottom: 25%;
                }
            }
            // 内容列表
            .substance{
                border-top: 1px solid #ccc;
                margin-bottom: 8%;
                .list:hover{
                    box-shadow: 0px 9px 30px 0px rgba(64, 45, 20, 0.1);
                }
                .list{
                    padding: 1% 5%;
                    font-size: 12px;
                    border-bottom: 1px solid #ccc;
                    display: flex;
                    i{
                        margin-right: 1%;
                        font-size: 14px;
                    }
                    .left{
                        flex: 6;
                        i{
                            color: #F19417;
                        }
                        .active{
                            color: #F19417;
                        }
                    }
                    .right{
                        flex: 1;
                        text-align: right;
                    }
                }
            }
        }
    }
}
</style>